<template>
  <view class="content">
    <!-- <up-image :src="activityBanner" width="100%" mode="widthFix"></up-image> -->
    <image :src="activityBanner" style="width: 100%" mode="widthFix"></image>
    <view class="map-view">
      <view :class="{ 'map-item2': index % 2 == 0 || index == 0, 'map-item': index % 2 != 0 && index != 0 }" v-for="(item, index) in mapList" :key="index">
        <!-- <view class="title">{{item.siteTitle}}</view> -->
        <view class="item-img" @tap="getAnswerQuestions(item, index)">
          <up-image :src="item.siteImage" width="100%" height="140rpx" radius="5"></up-image>
          <view class="mask" v-if="!item.unlockFlag && item.walkActivityId < 35">
            <up-icon name="lock-fill" size="28" color="#ffffff"></up-icon>
          </view>
          <!-- <view class="point"> 图片 height="60px"
						<up-image src="https://axhub.im/ax9/4fb01a9c2a1b02c8/images/%E7%AB%9E%E8%B5%9B%E5%9C%B0%E5%9B%BE/u13.png" width="20px" height="20px"></up-image>
						<view>{{item.unlockPoints}}积分({{item.unlockStepNumber}}步)</view>
					</view> -->
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { activityApi } from '@/api/activity/activity-app.js'

export default {
  data() {
    return {
      mapList: [],
      activityBanner: 'https://jqgh-public.yqfoodec.com/20250409/map_55069.jpg',
      options: {},
      pageRequest: {
        page: 1,
        limit: 10,
      },
      totalStepNumber: 0,
      whetherShowAnswer: 0,
    }
  },
  onLoad(options) {
    this.options = options
    const id = options.id
    if (options.siteBgImage) {
      console.log(options.siteBgImage)
      this.activityBanner = options.siteBgImage
    }

    // this.getDetail();
  },
  onShow() {
    this.getUserJourney()
  },
  methods: {
    async getDetail() {
      uni.showLoading({
        title: '加载中',
      })
      this.mapList = []
      const result = await activityApi.getCompetitionMap(this.options.id)
      this.mapList = result.data

      uni.hideLoading()
    },
    async getUserJourney() {
      const result = await activityApi.getUserJourneyList(this.options.id)

      const totalStepNumber = result.data.reduce((pre, cur) => {
        return pre + cur.stepNumber
      }, 0)
      this.totalStepNumber = totalStepNumber
      // console.log(totalStepNumber)
      this.getDetail()
    },

    // 答题
    getAnswerQuestions(item, index) {
      if (item.walkActivityId >= 35) {
        uni.navigateTo({
          url: `/brisk-walking/mapDetail?id=${item.id}&unlockFlag=${item.unlockFlag}&walkActivityId=${item.walkActivityId}&location=${JSON.stringify({
            latitude: item.latitude,
            longitude: item.longitude,
            distance: item.distance,
          })}&siteImage=${item.siteImage}&siteActivityDetails=${encodeURIComponent(JSON.stringify(item.siteActivityDetails))}`,
        })
      } else {
        if (item.unlockFlag) {
          uni.navigateTo({
            url: `/brisk-walking/mapDetail?id=${item.id}&unlockFlag=${item.unlockFlag}&walkActivityId=${item.walkActivityId}&location=${JSON.stringify({
              latitude: item.latitude,
              longitude: item.longitude,
              distance: item.distance,
            })}&siteImage=${item.siteImage}&siteActivityDetails=${encodeURIComponent(JSON.stringify(item.siteActivityDetails))}`,
          })
        } else {
          if (item.answerConfigVO !== null) {
            this.whetherShowAnswer = item.answerConfigVO.whetherShowAnswer // 答错后是否显示正确答案
          }

          if (index > 0) {
            if (!item.unlockFlag) {
              if (item.whetherOpenAnswer == 1) {
                if (this.mapList[index - 1].unlockFlag) {
                  this.goQuestion(item)
                } else {
                  uni.showToast({
                    title: '请先解锁前面的',
                    icon: 'none',
                  })
                }
              } else {
                if (this.mapList[index - 1].unlockFlag) {
                  this.getClock(item)
                } else {
                  uni.showToast({
                    title: '请先解锁前面的',
                    icon: 'none',
                  })
                }
              }
            }
          } else {
            if (!item.unlockFlag) {
              if (item.whetherOpenAnswer == 1) {
                this.goQuestion(item)
              } else {
                this.getClock(item)
              }
            }
          }
        }
      }
    },
    goQuestion(item) {
      let dataStr = JSON.stringify(item)
      if (this.totalStepNumber > item.unlockStepNumber) {
        uni.navigateTo({
          url: '../brisk-walking/knowledgeContest?data=' + encodeURIComponent(dataStr) + '&whetherShowAnswer=' + this.whetherShowAnswer,
        })
      } else {
        uni.showToast({
          title: '当前站点解锁步数未达标', // 步数未达到解锁条件
          icon: 'none',
        })
      }
    },
    async getClock(item) {
      if (item.walkActivityId < 35) {
        if (this.totalStepNumber > item.unlockStepNumber) {
          const result = await activityApi.getUnlockMap(item.walkActivityId, item.id)
          // console.log(result)
          if (result.code == 0) {
            uni.showToast({
              title: '解锁成功',
              icon: 'none',
            })
            this.getDetail()
          }
        } else {
          uni.showToast({
            title: '当前站点解锁步数未达标',
            icon: 'none',
          })
        }
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.map-view {
  position: absolute;
  top: 600px;
  left: 0;
  right: 0;
  bottom: 0;

  .map-item {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 30px;

    .item-img {
      position: relative;
      width: 150px;
      margin-left: 15px;
      margin-bottom: 15px;

      .mask {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }

    .title {
      position: absolute;
      top: 80px;
      left: 15px;
      width: 150px;
      font-size: 10px;
    }
  }

  .map-item2 {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 30px;

    .item-img {
      position: relative;
      width: 150px;
      margin-right: 15px;
      margin-bottom: 15px;

      .mask {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }

    .title {
      position: absolute;
      top: 80px;
      right: 15px;
      width: 150px;
      font-size: 10px;
    }
  }
}
</style>
